<template>
  <div class="yingmoo-store">
    <ul class="nav">
      <router-link tag="li" to="/ymMemberaccount">账户信息</router-link>
      <router-link tag="li" to="/ymMemberaccountamendtel">修改手机号</router-link>
      <router-link tag="li" to="/ymMemberaccountamendneweimal">修改邮箱</router-link>
      <router-link tag="li" to="/ymMemberaccountamendpassword">修改密码</router-link>
      <router-link tag="li" v-if="user.shop == 0" to="/ymMemberapplyforverify">申请验证</router-link>
    </ul>
    <div class="error">
      <el-steps :space="200" :active="0" finish-status="success">
        <el-step title="身份验证"></el-step>
        <el-step title="修改新手机"></el-step>
        <el-step title="成功"></el-step>
      </el-steps>
      <div class="content">
        <div class="message">
          <div class="message-left">
            <p>手机号</p>
            <!--<p>&nbsp;</p>-->
            <p>验证码</p>
            <p>短信验证码</p>
          </div>
          <div class="message-right">
            <p class="name">{{user.mobile}}</p>
            <!--<p><span><font color="#f29600">{{warning.picCode}}</font></span></p>-->
            <div class="input">
              <input type="text" v-model="checkCode" placeholder="" @keyup="checkPicCode"/>
              <span class="img"><img height="35px" width="95px" :src="picUrl" /></span>
              <a href="javascript:;"  @click="changeValidateCode"><span class="color cm">看不清，换一张</span></a>
            </div>
            <div class="input">
              <input type="text" v-model="mobileCode"  placeholder="" />
              <button id="getValidateCode" class="btnh" disabled="disabled" @click="getMobileCode">获取验证码</button>
              <span class="color">{{time}}秒后可重新发送</span>
            </div>
            <!--<router-link tag="div" to="/ymMemberaccountamendnewtel" class="submit">提交</router-link>-->
            <div class="submit" @click="commit">提交</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "yingmoo-store",
  data(){
		return {
			requestAddr:this.GLOBAL.addr,
			user:{},
			time:30,
			picUrl:'',
			picCodeValue:null,
			checkCode:null,
			validateCode:true,
			mobileCode:'',
			mobileCheck:true,
			warning:{
				picCode:null
			}
		}
	},
	mounted(){
		this.getUser();
		this.getCodeValue();
		this.picUrl = this.requestAddr+"/Login/getValidateCode?type=1&date="+new Date()
	},
	methods:{
		getUser:function(){
			var data = localStorage.getItem("user");
			if(data != null){
				this.user = JSON.parse(localStorage.getItem("user"));
			}
		},
		/*刷新图片验证码*/
		changeValidateCode:function(){
			this.picUrl = this.requestAddr+"/Login/getValidateCode?type=1&date="+new Date();
			this.getCodeValue();
		},
		/*校验图片验证码*/
		checkPicCode:function(){
			var btn = document.getElementById("getValidateCode");
			console.log(this.picCodeValue)
			if(this.checkCode == null || this.checkCode.trim() == ''){
					this.validateCode = true;
					this.warning.picCode = "请先输入验证码！"
					btn.style.background="#999999";
				  btn.disabled = 'true';
					return;
			}
			if((this.checkCode).toLowerCase() == (this.picCodeValue).toLowerCase()){
				this.validateCode = false;
				this.warning.picCode = null;
				btn.style.background="#036EB7";
				btn.removeAttribute("disabled");
				
			}else{
				this.validateCode = true;
				btn.style.background="#999999";
				  btn.disabled = 'true';
				this.warning.picCode = "验证码输入错误！"
			}
		},
		getCodeValue:function (){
			this.$http.post(this.requestAddr+"/Login/getCodeValue",null,{emulateJSON:true}).then(
	      (res)=>{
	      	var d = res.data;
	      	this.picCodeValue = d.result.code;
	      },
	      (error)=>{
	        console.log(error);
	      });
		},
		getMobileCode:function(){
			this.checkPicCode();
			if(this.validateCode){
				alert(this.warning.picCode);
			}else{
				this.$http.post(this.requestAddr+"/Login/getShortMessageCode",{"mobile":this.user.mobile,"picCode":this.checkCode,"type":'2'},{emulateJSON:true,withCredentials:true}).then(
					(res)=>{
						console.log(res.data);
						if(res.data.code!=0){
							this.$confirm('短信发送失败，请稍后重试！', '失败提示', {
			          confirmButtonText: '确定',
			          cancelButtonText: '取消',
			          type: 'warning' 
			        })
							return;
						}
						this.countDown();
						this.changeValidateCode();
					}
				)
			}
		},
		commit:function(){
			this.checkMobileCode();
			if(this.validateCode==true&&this.mobileCheck==true){
				return
			}
			window.location.href = "../#/ymMemberaccountamendnewtel"
		},
		//校验手机验证码
		checkMobileCode:function(){
			if(this.mobileCode == null||this.mobileCode == ''){
					alert("请输入手机验证码！")
					return ;
			}
			this.$http.post(this.requestAddr+"/Login/checkSMCValue",{"mobileCode":this.mobileCode},{emulateJSON:true,withCredentials:true}).then(
				(res)=>{
					if(res.data.code != 0){
						alert("手机验证码输入有误！")
						return
					}else{
						this.mobileCheck = false;
					}
				}
			)
		},
		countDown:function(){
			var btn = document.getElementById("getValidateCode");
			btn.style.background="#999999";
			btn.disabled = true;
			(this.time)-=1;
			var timeout = setTimeout(this.countDown,1000);
			if(this.time == 0){
				clearTimeout(timeout);
				btn.style.background="#036EB7";
				btn.removeAttribute("disabled");
				this.time = 30;
			}
		}
  }
}
</script>
<style scoped>
  .el-steps{
    width: 500px;
    padding-left: 100px;
    padding-top: 35px;
  }
</style>
<style scoped lang="less">
.yingmoo-store{
  width: 100%;
  .nav{
    width: 1200px;
    height: 46px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    background-color: #f2f2f2;
    margin-top: 20px;
    li{
      list-style: none;
      width: 90px;
      height: 30px;
      margin: 0 20px;
      line-height: 30px;
      color: #666666;
      text-align: center;
      font-size: 16px;
      cursor: pointer;
      &:nth-child(2){
        background-color: #036eb7;
        color: white;
      }
      &:hover{
        background-color: #036eb7;
        color: white;
      }
    }
  }
  .error{
    width: 1200px;
    height: 560px;
    background-color: white;
    margin: 0 auto;
  .content{
    width: 1200px;
    height: 470px;
    background-color: white;
    margin: 0 auto;
    margin-bottom: 30px;
    h4{
      font-size: 16px;
      color: #333333;
      font-weight: bold;
      padding-left: 40px;
      padding-top: 40px;
    }
    .message{
      display: flex;
      .message-left{
        p{
          width: 145px;
          text-align: right;
          line-height: 60px;
          font-size: 12px;
          color: #333333;
          &:nth-child(1){
            margin-top: 20px;
          }
        }
      }
      .message-right{
        margin-left: 25px;
        .name{
          margin-top: 30px;
          line-height: 37px;
        }
        p{
          line-height: 23px;
          color: #999999;
          font-size: 14px;
          margin-top: 38px;
          span{
            margin-left: 10px;
            img{
              margin-right: 3px;
            }
          }
        }
        div{
          margin-top: 25px;
          input{
            width: 503px;
            height: 31px;
            padding-left: 10px;
            font-size: 14px;
            outline: none;
            border-radius: 3px;
            border: 1px solid #dddddd;
          }
          .img{
            img{
              position: relative;
              top: 10px;
              left: 15px;
            }
          }
          .color{
            color: #f29600;
            font-size: 14px;
            padding-left: 15px;
          }
          .cm{
            padding-left: 30px;
          }
          .btnh{
            width: 110px;
            height: 35px;
            background-color: #999999;
            color: white;
            display: inline-block;
            margin-top: 0;
            margin-left: 15px;
            text-align: center;
            line-height: 35px;
            border-radius: 5px;
            cursor: pointer;
          }
        }
        .submit{
          width: 103px;
          height: 30px;
          color: white;
          background-color: #f29600;
          text-align: center;
          line-height: 30px;
          border-radius: 7px;
          margin-top: 44px;
          cursor: pointer;
        }
      }
    }
  }
  }
}
</style>
